<template>
  <div id="head">
    <span>卡号：{{ cardNumber }}</span>
    <a href="javascript:;" @click="logout" id="link">退出登录</a>
  </div>
</template>

<script>
import {get} from "../../common/request";

export default {
  name: "Head",
  data() {
    return {
      cardNumber: this.$store.getters.getUser.cardno
    }
  },
  methods: {
    logout() {
      this.$confirm('确定要退出网上银行吗', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        get("/account/logout").then(x => {
          if (x.code === 1) {
            this.$message.success(x.msg);
            this.$store.dispatch('asyncUpdateUser', '');
            this.$store.dispatch('asyncUpdateToken', '');
            //清除浏览器本地存储空间
            sessionStorage.removeItem('state');
            this.$router.push("/");
          } else {
            this.$message.error(x.msg);
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });
      });
    }
  }
}
</script>

<style scoped>
#head {
  background-color: rgb(36, 47, 66);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#link, span {
  color: white;
  margin: 0 20px 0 20px;
}
</style>
